【JS】jsx/tsx是什么？为什么 Vue3 的组件库都在使用 jsx/tsx？如何在Vue3中使用 jsx/tsx？ |
您所在的位置：网站首页 › 为什么要import react › 【JS】jsx/tsx是什么？为什么 Vue3 的组件库都在使用 jsx/tsx？如何在Vue3中使用 jsx/tsx？ |
【JS】jsx/tsx是什么？为什么 Vue3 的组件库都在使用 jsx/tsx？如何在Vue3中使用 jsx/tsx？
|
前几天得到一个疑问，为什么 React 要用 JSX 语法，这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离，这样设计的优越性到底在哪里？ 一、jsx是什么？JSX，即 javascript Xml的缩写，是Facebook开源的React框架里提供的语法糖，可以在JS中使用HTML语言。 官网原文： JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript. 二、为什么一些组件库在使用 jsx/tsx？对于 JSX 和 template(模板渲染)，在大部分场景下是推荐使用 template 的（尤其是在业务场景下）。Vue 3 基于 template 分析做了很多优化，并且对使用者是透明的，编译器默默地完成了所有的优化操作。而使用 JSX 的话，则需要手动进行一些优化操作。 例如关于 Vant组件库 为什么选择 JSX，主要原因是组件库代码比业务代码具有更强的动态性，使用 JSX 可以很灵活地控制动态 DOM 片段。 举个例子，假设有一个场景，需要根据 props 上的 reverse 属性，来决定是否要调换两块内容的渲染顺序。 在 JSX 中可以很容易实现： const renderContent = () => { const Content = [ Foo DOM..., Bar DOM..., ]; if (props.reverse) { Content.reverse(); } return {Content}; }如果通过模板来实现，在不抽象子组件的情况下，foo 和 bar 的模板结构需要重复写两遍，才能满足这个需求： Bar DOM... Foo DOM... Foo DOM... Bar DOM...因此，在动态性强的场景下，JSX 会有一定优势。 总的来说： Composition API + template 是最具性价比的选择， Composition API + JSX 是某些场景下追求极致的选择，相应地需要付出更多开发成本。JSX 胜在灵活性，在某些动态性要求较高的情况下，JSX 成了标配。 三、jsx/tsx快速上手在 JSX 表达式中，使用小括号 ( )包裹JSX代码，使用大括号 { }来嵌入动态值。vue中的用法详见：渲染函数 & JSX Vue 的类型定义也提供了 TSX 语法的类型推导支持。当使用 TSX 语法时，确保在 tsconfig.json 中配置了 "jsx": "preserve"，这样的 TypeScript 就能保证 Vue JSX 语法编译过程中的完整性。 v-if jsx/tsx中只保留了 v-show指令，没有 v-if指令使用 if/else和三目表达式都可以实现模板： yes nojsx: {ok.value ? yes : no}vue3示例: setup() { const isShow = false const element = () => { if (isShow) { return 我是if } else { return 我是else } } return () => ( element() } { isShow ? 我是三目1 : 我是三目2 } ) } v-for 同样，jsx/tsx 中也没有 v-for指令，需要渲染列表我们只需要使用Js 的数组方法map就可以了模板： {{ text }}jsx: { items.value.map(({ id, text }) => { return {text} }) }vue3示例: setup() { const listData = [ {name: 'Tom', age: 18}, {name: 'Jim', age: 20}, {name: 'Lucy', age: 16} ] return () => ( prop.listData.map(item => { return item.name} {item.age} }) } ) } v-on以 on 开头，并跟着大写字母的props会被当作事件监听器。比如，onClick 与模板中的 @click 等价。 { /* ... */ }} > click me 事件修饰符对于 .passive、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面： {}} onKeyupOnce={() => {}} onMouseoverOnceCapture={() => {}} /> class与style 绑定class类名绑定有两种方式，使用模板字符串或者使用数组。 // 使用模板字符串两个类名之间使用空格隔开 isBg ? 'headerBg' : '' }`}>header //数组 { color, fontSize: '16px' }}>style 四、使用举例在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。 如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴露的方法。 1. 子组件暴露方法 SFC（.vue）暴露方法在使用 .vue 定义的组件中，setup 中提供了 defineExpose() 方法，该方法可以将组件内部的方法暴露给父组件。 创建子组件 demo-component-sfc.vue： demo component sfc const demoFun = (str: string) => { console.log('demo component sfc', str) } // 使用 defineExpose 暴露组件内部的方法 defineExpose({ demoFun }) TSX（.tsx）暴露方法使用 .tsx 方式定义的组件，也是通过参数 context 中的 expose() 方法暴露组件内容的方法。 创建子组件 demo-component-tsx.tsx： import { defineComponent } from 'vue' export default defineComponent({ name: 'demo-component-tsx', setup (props, context) { const demoFun = (str: string) => { console.log('demo component tsx', str) } // 使用 expose 暴露组件内部的方法 context.expose({ demoFun }) return () => ( defineComponent, ref } from 'vue' import DemoComponentSfc from '@/components/ref/demo-component-sfc.vue' import DemoComponentTsx from '@/components/ref/demo-component-tsx' export default defineComponent({ name: 'demo-ref-tsx', setup () { const sfcRef = ref() const onBtnClick1 = () => { if (sfcRef.value) { sfcRef.value && sfcRef.value.demoFun('parent') } } const tsxRef = ref() const onBtnClick2 = () => { if (tsxRef.value) { tsxRef.value && tsxRef.value.demoFun('parent') } } return () => ( onBtnClick1}>parent button onBtnClick2}>parent button ) } })备注：这样浏览器渲染html是为没有元素的，节省了一个盒子的位置。 https://juejin.cn/post/7151950058501373989 |
【本文地址】